<template>
  <div>
    <div v-if="!reset" style="margin-top: 20px;margin-left: 2.5%; width: 97.5%">
      <el-row :gutter="20">
        <el-col :span="8">
          <div>
            <el-row class="grid-content bg-blue">
              <div class="colorbox" style="background-color: #4F94CD; width: 100%; height: 175px;">
                <div style="display: flex; flex-direction: row;">
                  <div class="left-title">
                    <span>合并后合作客户总数</span>
                    <span style="font-size: 38px;">{{customerTotal}}</span>
                  </div>
                  <div class="left-img" style="width: 62%; top: 10px; bottom: 10px;">
                    <ul >
                      <li v-for="(item,index) of customerName" :key="index" style="margin-bottom: 3px">
                        <span style="font-size: 15px;">{{item}}</span>
                        <span style="font-size: 15px;">{{customerValue[index]}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="bottom-title" style="">
                  <span style="font-size: 17px;">原始客户数  </span>
                  <span style="font-size: 17px;">{{customerNum}}</span>
                </div>
              </div>
            </el-row>
            <el-row class="grid-content bg-green" >
              <div class="colorbox" style="background-color: #3CB371; width: 100%; height: 330px;">
                <div style="display: flex; flex-direction: row;">
                  <div class="left-title">
                    <div>合并后合作门店总数</div>
                    <div style="font-size: 46px;">{{storeTotal}}</div>
                  </div>
                  <div class="left-img" style="height: 300px;top: 10px; bottom: 10px;">
                    <ul style="height: 260px;">
                      <li class="left-li" v-for="(item,index) of storeName">
                        <span>{{item}}:{{storeValue[index]}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="bottom-title" style="">
                  <span style="font-size: 17px;">原始门店数  </span>
                  <span style="font-size: 17px;">{{storeNum}}</span>
                </div>
              </div>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div >
            <el-row class="grid-content bg-blue">
              <div class="colorbox" style="background-color: #4F94CD; width: 100%; height: 175px;">
                <ul style="padding: 10px 20px">
                  <li class="left-li" v-for="(item,index) of customerName1">
                    <span>{{item}}:</span>
                    <span style="text-decoration: underline;cursor: pointer;" @click="navigationToCustomerPage(index)">{{customerValue1[index]}}</span>
                  </li>
                </ul>
              </div>
            </el-row>
            <el-row class="grid-content bg-green" >
              <div class="colorbox" style="background-color: #3CB371; width: 100%; height: 330px;">
                <ul style="padding:10px 20px">
                  <li class="left-li" v-for="(item,index) of storeName1">
                    <span>{{item}}:</span>
                    <span style="text-decoration: underline;cursor: pointer;" @click="navigationToStorePage(index)">{{storeValue1[index]}}</span>
                  </li>
                </ul>
              </div>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
            <el-row class="grid-content bg-blue">
              <div class="colorbox" style="background-color: #4F94CD; width: 100%; height: 175px;">
                <div style="display: flex; flex-direction: row;">
                  <div class="left-title" @click="toQuantity()">
                    <span>人员待处理数量</span>
                    <span style="font-size: 38px;">{{quantity}}</span>
                  </div>
                  <!-- <div class="left-img" style="width: 62%; top: 10px; bottom: 10px;">
                    <ul >
                      <li v-for="(item,index) of customerName" :key="index" style="margin-bottom: 3px">
                        <span style="font-size: 15px;">{{item}}</span>
                        <span style="font-size: 15px;">{{customerValue[index]}}</span>
                      </li>
                    </ul>
                  </div> -->
                </div>
                <!-- <div class="bottom-title" style="">
                  <span style="font-size: 17px;">原始客户数  </span>
                  <span style="font-size: 17px;">{{customerNum}}</span>
                </div> -->
              </div>
            </el-row>
        </el-col>
        <el-col :span="8">
          <div class="btn-container" >
            <div class="btn-item">
              <div class="accessbox" @click="((el)=>{this.$router.push({name:'addStore'})})">
                <div style="width: 100%; height: 100%; background-color: #c0504d; border: 1px solid #fff; border-radius: 10px; padding-top: 20px;">
                  <img src="/static/img/32/44.png">
                  <div style="color: #fff;">门店新增</div>
                </div>
              </div>
            </div>
            <div class="btn-item">
              <div class="accessbox" @click="((el)=>{this.$router.push({name:'updateStore'})})">
                <div style="width: 100%; height: 100%; background-color: #4bacc6; border: 1px solid #fff; border-radius: 10px; padding-top: 20px;">
                  <img src="/static/img/32/309.png">
                  <div style="color: #fff;">门店变更</div>
                </div>
              </div>
            </div>
            <div class="btn-item">
              <div class="accessbox" @click="((el)=>{this.$router.push({name:'addNoSAPCustomer'})})">
                <div style="width: 100%; height: 100%; background-color: #3CB371; border: 1px solid #fff; border-radius: 10px; padding-top: 20px;">
                  <img src="/static/img/32/9.png">
                  <div style="color: #fff;">客户新增</div>
                </div>
              </div>
            </div>
            <div class="btn-item">
              <div class="accessbox" @click="((el)=>{this.$router.push({name:'updateNoSAPCustomer'})})">
                <div style="width: 100%; height: 100%; background-color: #8064a2; border: 1px solid #fff; border-radius: 10px; padding-top: 20px;">
                  <img src="/static/img/32/15.png">
                  <div style="color: #fff;">客户变更</div>
                </div>
              </div>
            </div>
            <div class="btn-item" @click="reset=true">
              <div class="accessbox">
                <div style="width: 100%; height: 100%; background-color: #4F94CD; border: 1px solid #fff; border-radius: 10px; padding-top: 20px;">
                  <img src="/static/img/32/317.png">
                  <div style="color: #fff;">密码修改</div>
                </div>
              </div>
            </div>
            <div class="btn-item">
              <div class="accessbox" @click="((el)=>{this.$router.push({name:'smmsDealerSAPChangeList'})})">
                <div style="width: 100%; height: 100%; background-color: #8064a2; border: 1px solid #fff; border-radius: 10px; padding-top: 20px;">
                  <img src="/static/img/32/15.png">
                  <div style="color: #fff;">SAP客户变更</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        
      </el-row>
    </div>

    <div class="resetPwd" v-if="reset">
      <div class="main-label">
        <div style="display: inline-block">
          修改密码
        </div>
        <el-button class="head-btn" @click="">保存</el-button>
        <el-button class="head-btn" @click="reset = false">返回</el-button>
      </div>

      <el-form ref="form" :model="account" label-width="80px" style="padding: 10px 0">
        <el-form-item label="账户">
          <el-input v-model="account.name"></el-input>
        </el-form-item>
        <el-form-item label="旧密码">
          <el-input v-model="account.oldPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="account.newPwd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="account.ensure"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="account.ensure" style="width: 100px"></el-input>
          <valid-code  style="display:inline-flex;width: 86px" @input="validCode" ref="code" @click="refreshCode"></valid-code>
        </el-form-item>
      </el-form>
    </div>


  </div>
</template>

<script>
    import ValidCode from "../../common/ValidCode";
  export default {
      name:'myConsole',
      data() {
          return{
              userInfo:JSON.parse(localStorage.getItem("userinfo")),
              storeName:[],
              storeValue:[],
              storeName1:[],
              storeValue1:[],
              customerName:[],
              customerValue:[],
              customerName1:[],
              customerValue1:[],
              storeTotal:0,
              storeNum:0,
              customerTotal:0,
              customerNum:0,
              reset:false,
              account:{},
              customerPages: [],
              storePages: [],
              quantity: 0
          }
      },
      methods:{
          getLodingInfo() {
              this.$http.get(this.$api.API_WORKBENCH_LODING_INFO,{userAccount:this.userInfo.userAccount}).then(resp=>{
                  let stat = JSON.parse(resp.strJson)
                  this.storeName = stat[0].data.dataname
                  this.storeValue = stat[0].data.datavalue
                  this.storeName1 = stat[0].data.dataname1
                  this.storePages = ["unhandleStore","addExamine","relationExamine","updateExamine"]
                  this.storeValue1 = stat[0].data.datavalue1
                  this.storeTotal = stat[0].data.datatotal
                  this.storeNum = stat[0].data.datanum
                  this.customerName = stat[1].data.dataname
                  this.customerValue = stat[1].data.datavalue
                  this.customerName1 = stat[1].data.dataname1
                  this.customerPages = ["smmsDealerPendingList","smmsDealerAppList","smmsDealerRelationList","smmsDealerChangeApp"]
                  this.customerValue1 = stat[1].data.datavalue1
                  this.customerTotal = stat[1].data.datatotal
                  this.customerNum = stat[1].data.datanum
              })
              this.$http.get(this.$api.API_MDM_ORG_PENDING,{}).then(resp=>{
                console.log(resp, 888888);
                this.quantity = resp
              })

          },
          validCode(code){
              this.trueCode = code
          },
          refreshCode() {
              this.$refs.code.refreshCode()
          },
          navigationToCustomerPage(index) {
            this.$router.push({name: this.customerPages[index]})
          },
          navigationToStorePage(index) {
            this.$router.push({name: this.storePages[index]})
          },
          toQuantity() {
            this.$router.push({name: 'orgRepPending'})
          }
      },
      created() {
          this.getLodingInfo()
      },
      components:{ValidCode}
  }
</script>
<style lang="less" scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }

    .bg-blue-dark {
      background: #3385bf;
    }

    .bg-blue {
      background: #4F94CD;
    }

    .bg-green {
      background: #3CB371;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
      overflow: hidden;
      position: relative;
    }
    .grid-content * {
      font-size: 12px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  .colorbox {
    width: 22%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    color: #fff;
    font-family: ”微软雅黑”;
    overflow-x: hidden;
  }
  .colorbox .left-img {
    position: relative;
  }
  .colorbox .left-title {
    width: 38%;
    margin-left: calc(10% / 4);
    min-height: 130px;
    height: auto;
    padding-left: 10px;
    padding-top: 15px;
  }
  .colorbox .bottom-title {
    float: left;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    background-color: rgba(255,255,255,0.3);
    font-size: 16px;
  }
  .xiahuaxian {
    text-decoration: underline !important;
    list-style-type: none !important;
    color: inherit;
  }
  .left-li {
    height: 20px;
    line-height: 8px;
    font-size: 25px;
    margin-bottom: 3px;
    span{
      font-size: 15px;
    }
  }
  ul li {
    list-style-type: none;
  }
  .main-label{
    border: #ccc 1px solid;
    height: 36px;
    line-height: 35px;
    font-weight: bold;
    padding-left: 5px;
  }
  .head-btn {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    vertical-align: center;
    font: 8px/8px HelveticaNeue, Arial;
    padding: 0px 11px;
    border: 1px solid #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 9pt;
    margin-left: 2px;
    line-height: 25px;
    color: #000;
    outline: none;
    background-image: url(../../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #ccc;

    &:hover {
      color: #FFF;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc');
      border: 1px solid #d51900;
      background: linear-gradient(top, #d51900, #d51900);
      background: -moz-linear-gradient(top, #d51900, #d51900);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d51900), to(#d51900));
      text-shadow: -1px -1px 1px #1c6a9e;
    }
  }

  .btn-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    .btn-item{
      width: 32%; height: 100px; margin-top: 10px; margin-bottom: 10px; text-align: center;
      cursor: pointer;
      .accessbox{
        width: 90px; height: 90px; display: inline-block;
      }
    }
  }

  /deep/.el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 40px;
    position: absolute;
    padding: 0 5px !important;
    top: 0;
    left: 0;
  }
  /deep/.el-form-item {
    margin-bottom: 10px;
  }
  /deep/.el-input__inner{
    border-radius: 0px;
  }
  .el-input{
    padding-right: 10px;
    width: 200px;
  }
</style>
